<template>
    <div>
    <el-form inline  class="demo-form-inline">
        <el-form-item label="字典类型">
            <el-input v-model="payload.name" placeholder="字典类型名" />
        </el-form-item>
        <el-form-item label="字典编码">
            <el-input v-model="payload.code" placeholder="字典编码" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain  activity @click="queryDic">查询</el-button>
            <el-button type="primary" plain  activity @click="reset">重置</el-button>
            <el-button type="primary" plain  @click="addDic">新增</el-button>
        </el-form-item>
    </el-form>
    <el-divider style="margin: 12px 0"/>
    <el-table ref="table" border v-loading="loading"  header-cell-class-name="headerClass" :data="data.tableData" >
        <el-table-column align="center" type="index" label="序号" width="100px"/>
        <el-table-column type="expand">
            <template #default="props">
                <el-table :data="props.row.items" header-cell-class-name="headerClass">
                    <el-table-column align="center"  label="字典编码" prop="code" />
                    <el-table-column align="center"  label="字典值" prop="value" />
                    <el-table-column align="center"  label="备注" prop="remark" />
                    <el-table-column align="center"  label="序号" prop="orderId" />
                    <el-table-column align="center"  label="更新时间" prop="updateTime" >
                    <template #default="scope">
                        {{moment(scope.row.updateTime).format("yyyy-MM-DD HH:mm:ss")}}
                    </template>
                    </el-table-column>
                    <el-table-column align="center"  label="操作">
                        <template #default="scope">
                            <el-link title="修改" type="primary" @click="editDicItem(scope.row.id)">
                                <el-icon :size="20">
                                    <Edit />
                                </el-icon>
                            </el-link>
                            &nbsp;
                            <el-popconfirm title="删除？" @confirm="deleteDicItem(scope.row.id)"  @cancel="">
                                <template #reference>
                                    <el-link type="danger" title="删除">
                                        <el-icon :size="20">
                                            <Delete />
                                        </el-icon>
                                    </el-link>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-table-column>
        <el-table-column align="center"  prop="name" label="字典类型名" />
        <el-table-column align="center"  prop="code" label="字典编码"  />
        <el-table-column align="center"  prop="remark" label="备注" />
        <el-table-column align="center"  prop="updateTime" label="更新时间" >
            <template #default="scope">
                {{moment(scope.row.updateTime).format("yyyy-MM-DD HH:mm:ss")}}
            </template>
        </el-table-column>
        <el-table-column align="center"  label="操作">
            <template #default="scope">
                <el-link title="配置" type="primary" @click="addDicItem(scope.row)">
                    <el-icon :size="20">
                        <Plus/>
                    </el-icon>
                </el-link>
                &nbsp;
                <el-link title="修改" type="primary" @click="editDic(scope.row.id)">
                    <el-icon :size="20">
                    <Edit />
                </el-icon>
                </el-link>
                &nbsp;
                <el-popconfirm title="删除？" @confirm="deleteDic(scope.row.id)"  @cancel="">
                    <template #reference>
                        <el-link type="danger" title="删除">
                            <el-icon :size="20">
                                <Delete />
                            </el-icon>
                        </el-link>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
        <el-pagination
                style="display: flex;align-items:center;justify-content:center;"
                v-model:currentPage="query.currentPage"
                v-model:page-size="query.pageSize"
                :page-sizes="[10, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="query.total"
                @size-change="queryDic"
                @current-change="queryDic"
        />
    <ModDicType @close="transData.isOpen=false"  @reload="queryDic" :transData=transData :isOpen="transData.isOpen" :openType=transData.openType />
    <ModDicItem @close="transData.isOpen2=false" @reload="queryDic" :dicItem="dicItem"
                :isOpen="transData.isOpen2"  :openType=transData.openType />
    </div>
</template>

<script setup>
    import ModDicType from '@/components/system/ModDicType.vue'
    import ModDicItem from '@/components/system/ModDicItem.vue'
    import request from '@/utils/request.js'
    import {ElMessage} from 'element-plus'
    import {ref, reactive, onMounted} from 'vue'

    let data = reactive({
        tableData:[],
    });
    let transData = reactive({})
    let dicItem = reactive({
        id:"",
        type:"",
        dic:null
    });

    let payload = reactive({})
    let loading = ref(true)

    let query = reactive({currentPage:1,pageSize:10,total:0})

    onMounted(()=>{
         queryDic()
    })

    function queryDic(){
        query.payload = payload
        request.post("/api/dictionary/getDicTypes", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading = false
        })
    }

    function reset(){
        query.code = ""
        query.name = ""
    }

    function addDic(){
        transData.openType = "add"
        transData.isOpen = true
    }
    function addDicItem(dic){
        debugger
        transData.isOpen2 = true
        transData.openType = "add"
        dicItem.dic = dic
    }
    function editDicItem(id){
        transData.isOpen2 = true
        transData.openType = "edit"
        dicItem.id = id
    }
    function deleteDic(id){
        request.get(`/api/dictionary/delete/${id}`).then(resp => {
            queryDic()
            ElMessage({message: '删除成功！',type: 'success'})
        })
    }
    function deleteDicItem(id){
        request.get(`/api/dictionary/deleteItem/${id}`).then(resp => {
            queryDic()
            ElMessage({message: '删除成功！',type: 'success'})
        });
    }
    function editDic(id){
        transData.id = id
        transData.openType = "edit"
        transData.isOpen = true
    }

</script>
<style>
    .address {overflow:hidden;white-space:nowrap;word-wrap:break-word;text-overflow:"ellipsis";}
    .head {background-color: #9561cc}
</style>